<template>
	<div class="resident-list">
		<h2>居民列表</h2>
		<div class="login-btn">
			<el-button type="primary">搜索</el-button>
			<el-button type="primary">添加</el-button>
			<el-button type="primary">修改</el-button>
			<el-button type="primary">删除</el-button>
		</div>
		<table>
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>角色</th>
					<th>邮箱</th>
					<th>电话</th>
					<th>状态</th>
					<th>注册时间</th>
					<th>修改时间</th>
					<th>上次登陆时间</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="resident in residents" :key="resident.id">
					<td>{{ resident.id }}</td>
					<td>{{ resident.username }}</td>
					<td>{{ resident.role }}</td>
					<td>{{ resident.email }}</td>
					<td>{{ resident.phone }}</td>
					<td>{{getStatusText(resident.status) }}</td>
					<td>{{ resident.createdAt }}</td>
					<td>{{ resident.updatedAt }}</td>
					<td>{{ resident.lastLoginAt }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	import {
		getResidentList
	} from "../api/index.js";
	export default {
		data() {
			return {
				residents: [], // 居民数据
			};
		},
		created() {
			this.getResidentList();
		},
		methods: {
			async getResidentList() {
				console.log('开始请求数据...');
				const res = await getResidentList();
				console.log('API响应:', res);
				if (res.code === 1) {
					this.residents = res.data;
					console.log('居民数据', this.residents);
				}
			},
			getStatusText(status) {
				const statusMap = {
					'1': '已激活',
					'0': '未激活',
					'2': '已禁用'
				}
				return statusMap[status] || '未知状态'
			}
		}
	};
</script>

<style scoped>
	.resident-list {
		padding: 20px;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	th,
	td {
		border: 1px solid #ddd;
		padding: 8px;
		text-align: left;
	}

	th {
		background-color: #f2f2f2;
	}
</style>